<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '340px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: null,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val)
    //   }
    // }
    chartData(val) {
      // this.setOptions(val)
      this.chartData = val
      this.initChart(val)
    }
  },
  mounted() {
    // console.log('regperiod:' + JSON.stringify(this.chartData))
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // var trade_fee_num = []
      // var negative_fee_num = []
      // var unnormal_num = []
      // var trade_fee_sum = []
      // var negative_fee_sum = []
      // var unnormal_fee = []
      // var date = []
      // for (var i = 0; i < this.chartData.length; i++) {
      //   trade_fee_num.push(this.chartData[i].trade_fee_num)
      //   negative_fee_num.push(this.chartData[i].negative_fee_num)
      //   unnormal_num.push(this.chartData[i].unnormal_num)
      //   trade_fee_sum.push(this.chartData[i].trade_fee_sum)
      //   negative_fee_sum.push(this.chartData[i].negative_fee_sum)
      //   unnormal_fee.push(this.chartData[i].unnormal_fee)
      //   date.push(this.chartData[i].date)
      // }
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      // this.setOptions()
    },
    setOptions({ date, trans_amount, trans_num, negative_fee, negative_num } = {}) {
      // setOptions() {
      this.chart.setOption({
        title: {
          text: '近8天对账统计',
          textStyle: {
            color: '#333',
            fontSize: 16,
            fontStyle: 'normal'
          }
          // top: '3%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          containLabel: true,
          borderColor: 0,
          backgroundColor: 'transparent'
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          x: 'right',
          padding: [5, 70, 0, 0],
          y: ' center',
          data: ['正交易笔数', '负交易笔数', '正交易金额', '负交易金额'],
          itemGap: 39
        },
        xAxis: [
          {
            type: 'category',
            data: date,
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#8691AA'
              }
            },
            axisLabel: {
              color: '#4A5A7F',
              textStyle: {
                fontSize: '14'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '笔数',
            // min: 0,
            // max: max,
            // interval: 50,
            axisLabel: {
              // formatter: '{value} ml'
              formatter: '{value} ',
              color: '#5793F3'
            },
            axisTick: {
              show: false
            }
          },
          {
            type: 'value',
            name: '金额',
            // min: 0,
            // max: max,
            // interval: 5,
            axisLabel: {
              // formatter: '{value} °C'
              formatter: '{value} ',
              color: '#FEAF53'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#FE9D2C'
              }
            }
          }
        ],
        series: [
          {
            name: '正交易笔数',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#4776E6'
                }, {
                  offset: 1,
                  color: '#8E54E9'
                }]),
                barBorderRadius: [4, 4, 0, 0]
              }
            },
            data: trans_num
          },
          {
            name: '负交易笔数',
            type: 'bar',
            barWidth: '10%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#EDDE5D'
                }, {
                  offset: 1,
                  color: '#F09819'
                }]),
                barBorderRadius: [4, 4, 0, 0]
              }
            },
            data: negative_num
          },
          // {
          //   name: '异常笔数',
          //   type: 'bar',
          //   barWidth: '10%',
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: '#FF9966'
          //       }, {
          //         offset: 1,
          //         color: '#FF5E62'
          //       }]),
          //       barBorderRadius: [4, 4, 0, 0]
          //     }
          //   },
          //   data: unnormal_num
          // },
          {
            name: '正交易金额',
            type: 'line',
            yAxisIndex: 1,
            'itemStyle': {
              'normal': {
                'color': '#518CF6'
              }
            },
            data: trans_amount
          },
          {
            name: '负交易金额',
            type: 'line',
            yAxisIndex: 1,
            'itemStyle': {
              'normal': {
                'color': '#F4B941'
              }
            },
            data: negative_fee
          }
          // ,
          // {
          //   name: '异常金额',
          //   type: 'line',
          //   yAxisIndex: 1,
          //   'itemStyle': {
          //     'normal': {
          //       'color': '#D14A61'
          //     }
          //   },
          //   data: unnormal_fee
          // }
        ]
      })
      window.addEventListener('resize', () => {
        // 自动渲染echarts
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>
